<template>
  <view>
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content">草稿箱</block>
      <block slot="right">
        <image
          @click="showFun"
          class="nav-right-image"
          src="@/static/images/nav_opt.png"
        ></image>
      </block>
    </cu-custom>

    <view
      class="page-content"
      :style="{ height: this.ContentArea + 'px', paddingTop: '30rpx' }"
    >
      <view class="page-search">
        <view class="search">
          <view class="search-left" @click="searchBtn">
            <image src="@/static/images/search.png" mode="aspectFit" />
          </view>
          <input
            class="search-center"
            type="text"
            placeholder="输入任意字段进行搜索"
            placeholder-class="search-placeholder"
            v-model="searchValue"
            @blur="searchBtn"
          />
        </view>
      </view>

      <view class="page-content-main">
        <view class="select-box">
          <view style="position: relative">
            <uni-datetime-picker v-model="createTime" type="line">
              <view class="select">
                <view class="select-value">{{ createTimeShow }}</view>
                <view class="select-icon" v-if="createTime == ''">
                  <image src="@/static/images/downArrow.png" mode="aspectFit" />
                </view>
              </view>
            </uni-datetime-picker>
            <view
              class="cuIcon-roundclose"
              v-if="createTime != ''"
              style="
                z-index: 9;
                width: 20px;
                height: 20px;
                position: absolute;
                right: 55rpx;
                top: 25rpx;
                color: #ffffff;
              "
              @click="clearDatetimePicker"
            >
            </view>
          </view>

          <!-- <view class="selectDepart">
						<view class="cu-form-group">
							<text @tap="ChooseDepartIds"
								style="color: #FFFFFF;display: inline;margin-right: 20rpx;white-space: nowrap;">
								{{departObj.departTitleLast.length > 0 ? departObj.departTitleLast : '请选择'}}
							</text>
						</view>
						<view class="select-icon">
							<image src="@/static/images/downArrow.png" mode="aspectFit" />
						</view>
					</view> -->
          <!-- <view class="select">
						<view class="cu-form-group">
							<view class="title"></view>
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="picker">
									{{index>-1?array[index]:'请选择'}}
								</view>
							</picker>
						</view>
						<view class="select-icon">
							<image src="@/static/images/downArrow.png" mode="aspectFit" />
						</view>
					</view> -->
          <!-- <view class="select">
						<view class="cu-form-group">
							<view class="title"></view>
							<picker @change="bindPickerChangeTwo" :value="indexTwo" :range="arrayTwo">
								<view class="picker">
									{{indexTwo>-1?arrayTwo[indexTwo]:'请选择'}}
								</view>
							</picker>
						</view>
						<view class="select-icon">
							<image src="@/static/images/downArrow.png" mode="aspectFit" />
						</view>
					</view> -->
          <view class="mySelect">
            <my-select
              range-key="text"
              value-key="value"
              dict-code="approval_status"
              class="mySelect-value"
              style="position: inherit"
              v-model="approvalStatus"
            />
            <view class="mySelect-icon">
              <image src="@/static/images/downArrow.png" mode="aspectFit" />
            </view>
          </view>
        </view>

        <scroll-view
          class="list"
          :scroll-y="true"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          :refresher-background="'#F9F9F9'"
          @scrolltolower="onEndReached"
        >
          <uni-swipe-action right-options="rightOptions">
            <uni-swipe-action-item
              v-for="(item, index) in dataList"
              :key="index"
            >
              <checkbox
                v-if="isBatchChoose"
                class="round blue"
                :class="selectList.includes(item.id) ? 'checked' : ''"
                :checked="selectList.includes(item.id) ? true : false"
                :value="item.id"
                @click="checkBoxClick(item)"
                style="position: absolute; top: 45%"
              ></checkbox>
              <view
                :style="isBatchChoose ? 'margin-left: 80rpx;' : ''"
                style="
                  position: relative;
                  display: flex;
                  margin-top: 10px;
                  background-color: #f9f9f9;
                  border-radius: 15px;
                  padding: 10px;
                "
              >
                <view>
                  <image class="nav-right-image" :src="item.avatar"></image>
                </view>
                <view class="textView">
                  <view style="display: flex; align-items: center">
                    <text class="listText">
                      {{ item.userId_dictText }}
                    </text>
                    <text
                      style="
                        background-color: #ffefee;
                        padding: 3px 10px;
                        border-radius: 5px;
                        display: inline-block;
                        color: #b12424;
                        margin-left: 10px;
                      "
                    >
                      {{ item.type }}
                    </text>
                  </view>
                  <view
                    style="margin-top: 8px; display: flex; align-items: center"
                  >
                    <image
                      style="width: 20px; height: 20px"
                      src="@/static/images/Group3.png"
                    ></image>
                    <text class="listTextTwo"> 工号：{{ item.workNo }} </text>
                  </view>
                  <view
                    style="margin-top: 8px; display: flex; align-items: center"
                  >
                    <image
                      style="width: 20px; height: 20px; vertical-align: middle"
                      src="@/static/images/Group1.png"
                    ></image>
                    <text class="listTextTwo"> 年龄：{{ item.age }} </text>
                  </view>
                  <view
                    style="margin-top: 8px; display: flex; align-items: center"
                  >
                    <image
                      style="width: 20px; height: 20px"
                      src="@/static/images/Group1.png"
                    ></image>
                    <text class="listTextTwo">
                      距离签约天数：{{ item.daysFromSigning }}
                    </text>
                  </view>
                  <statusText :status="item.approvalStatus"></statusText>
                </view>
                <!-- <view style="width:20px;position: absolute;right: 30px;top:16px;">
                  <image style="width: 20px;height: 20px;" src="@/static/images/blackListBtn.png"
                    @click="toDetails"></image>
                </view> -->
              </view>

              <template v-slot:right>
                <view
                  style="
                    position: relative;
                    margin-top: 10px;
                    margin-left: 20rpx;
                    background-color: #f9f9f9;
                    border-radius: 15px;
                    padding: 20rpx 30rpx;
                  "
                >
                  <view
                    @click="toEdit(item)"
                    style="
                      border-radius: 30rpx;
                      background-color: rgba(69, 145, 254, 1);
                      padding: 10rpx 30rpx;
                      text-align: center;
                      margin-bottom: 25rpx;
                      color: #ffffff;
                    "
                  >
                    编辑
                  </view>
                  <view
                    @click="toDelete(item.id)"
                    style="
                      border-radius: 30rpx;
                      background-color: rgba(220, 31, 31, 1);
                      padding: 10rpx 30rpx;
                      text-align: center;
                      margin-bottom: 25rpx;
                      color: #ffffff;
                    "
                  >
                    删除
                  </view>
                  <view
                    @click="toExamine(item.id)"
                    style="
                      border-radius: 30rpx;
                      background-color: rgba(255, 173, 4, 1);
                      padding: 10rpx 10rpx;
                      color: #ffffff;
                    "
                  >
                    提交审核
                  </view>
                </view>
              </template>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </scroll-view>
        <view style="height: 90rpx; padding: 20rpx" v-if="isBatchChoose">
        </view>
        <view
          style="
            height: 90rpx;
            background-color: #f1f1f1;
            padding: 20rpx;
            position: fixed;
            bottom: 0;
            width: 95%;
            z-index: 999;
          "
          v-if="isBatchChoose"
        >
          <view>
            <checkbox
              class="round blue"
              :class="isCheckAll ? 'checked' : ''"
              :checked="isCheckAll ? true : false"
              value="all"
              @click="checkAllClick"
              style="position: absolute; left: 0; top: 15%"
            >
            </checkbox>
            <text
              style="position: absolute; left: 0; top: 65%; font-size: 18rpx"
              >全选</text
            >
          </view>
          <view style="float: right; margin-right: 40rpx">
            <button
              class="cu-btn round sm bg-red"
              style="margin-right: 20rpx"
              @click="cancel"
            >
              取消
            </button>
            <button class="cu-btn round sm bg-blue" @click="btnBatchSure">
              确定
            </button>
          </view>
        </view>
      </view>
    </view>

    <view class="fun-wrap" v-show="isShowFun" @click="hideFun">
      <view class="fun-box" :style="{ top: this.CustomBar + 'px' }">
        <view class="fun-item" @click.stop="gotoAdd">
          <image class="fun-icon" src="@/static/images/addIcon.png" />
          <text class="fun-text">新增</text>
        </view>
        <view class="fun-item" @click="batchDelete">
          <image class="fun-icon" src="@/static/images/deleteIcon.png" />
          <text class="fun-text">删除</text>
        </view>
        <view class="fun-item" @click="importBtn">
          <image class="fun-icon" src="@/static/images/importIcon.png" />
          <text class="fun-text">导入</text>
        </view>
        <view class="fun-item" @click="exportBtn">
          <image class="fun-icon" src="@/static/images/exportIcon.png" />
          <text class="fun-text">导出</text>
        </view>
        <view class="fun-item" @click="draftBatchBtn">
          <image class="fun-icon" src="@/static/images/draftIcon.png" />
          <text class="fun-text">草稿箱</text>
        </view>
      </view>
    </view>

    <uni-popup ref="importFlag" background-color="#fff" :mask-click="false">
      <view>
        <view
          style="
            background-color: #ffffff;
            padding: 30rpx;
            width: 580rpx;
            height: 470rpx;
            border-radius: 42rpx;
          "
        >
          <view class="import-item">
            <text
              style="
                font-size: 30rpx;
                color: rgba(29, 29, 33, 1);
                font-weight: 550;
              "
              >导入数据</text
            >
            <view style="margin-top: 20rpx">
              <text style="font-size: 20rpx; color: rgba(135, 135, 135, 1)"
                >为确保上传数据与列表内容匹配，请先</text
              >
              <text
                style="font-size: 20rpx; color: rgba(69, 145, 254, 1)"
                @click="download"
                >下载示例文件</text
              >
            </view>
            <text
              style="
                font-size: 20rpx;
                color: rgba(255, 59, 59, 1);
                padding-top: 10rpx;
                margin-top: 10rpx;
              "
              >不支持导入流程数据，导入前请仔细核对</text
            >

            <view style="margin-top: 30rpx" class="example-body">
              <uni-file-picker
                style=""
                limit="5"
                file-mediatype="all"
              ></uni-file-picker>
            </view>

            <text
              style="
                font-size: 20rpx;
                color: rgba(193, 193, 193, 1);
                padding-top: 10rpx;
              "
              >支持xlsx格式，文件大小不限</text
            >
            <view style="display: flex; margin-top: 30rpx">
              <view
                @click="importCancel"
                style="
                  background-color: rgba(217, 217, 217, 1);
                  border-radius: 10rpx;
                  padding: 22rpx 90rpx;
                  color: rgba(86, 85, 85, 1);
                "
              >
                取消
              </view>
              <view
                @click="importSureBtn"
                style="
                  background-color: rgba(69, 145, 254, 1);
                  border-radius: 10rpx;
                  padding: 22rpx 90rpx;
                  color: rgba(255, 255, 255, 1);
                  margin-left: 30rpx;
                "
              >
                确认
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="importSureFlag" background-color="#fff" :mask-click="false">
      <view>
        <view
          style="
            text-align: center;
            background-color: #ffffff;
            padding: 11rpx;
            width: 580rpx;
            height: 470rpx;
            border-radius: 42rpx;
          "
        >
          <view class="submit-item">
            <image class="submit-icon" src="@/static/duihaoblue.png" />
          </view>
          <view style="margin-top: 28rpx">
            <text class="submit-text">数据导入完成</text>
          </view>
          <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx">
            <text>请前往</text>
            <text @click="importDetail" style="color: #1e5eff">详情页</text>
            <text>面查看</text>
          </view>
          <button
            @click="sureTwo"
            style="
              border-radius: 20rpx;
              background-color: rgba(69, 145, 254, 1);
              color: rgba(255, 255, 255, 1);
              width: 300rpx;
              margin-top: 27rpx;
            "
          >
            确定
          </button>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="exportFlag" background-color="#fff" :mask-click="false">
      <view>
        <view
          style="
            text-align: center;
            background-color: #ffffff;
            padding: 11rpx;
            width: 580rpx;
            height: 470rpx;
            border-radius: 42rpx;
          "
        >
          <view class="submit-item">
            <image class="submit-icon" src="@/static/duihaoblue.png" />
          </view>
          <view style="margin-top: 28rpx">
            <text class="submit-text">数据导出完成</text>
          </view>
          <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx">
            <text>请前往本地某某查看查看</text>
          </view>
          <button
            @click="sureThree"
            style="
              border-radius: 20rpx;
              background-color: rgba(69, 145, 254, 1);
              color: rgba(255, 255, 255, 1);
              width: 300rpx;
              margin-top: 27rpx;
            "
          >
            确定
          </button>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="urgingPopup" background-color="#fff" :mask-click="false">
      <view
        style="
          text-align: center;
          background-color: #ffffff;
          padding: 11rpx;
          width: 580rpx;
          height: 470rpx;
          border-radius: 42rpx;
        "
      >
        <view class="submit-item">
          <image class="submit-icon" src="@/static/urging.png" />
        </view>
        <view style="margin-top: 28rpx">
          <text class="submit-text">催办成功</text>
        </view>
        <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx">
          <text>已提醒审核人员进行审核</text>
        </view>
        <button
          @click="sureOne"
          style="
            border-radius: 20rpx;
            background-color: rgba(69, 145, 254, 1);
            color: rgba(255, 255, 255, 1);
            width: 300rpx;
            margin-top: 27rpx;
          "
        >
          确定
        </button>
      </view>
    </uni-popup>
    <uni-popup ref="deletePopup" background-color="#fff" :mask-click="false">
      <view
        style="
          text-align: center;
          background-color: #ffffff;
          padding: 11rpx;
          width: 580rpx;
          height: 470rpx;
          border-radius: 42rpx;
        "
      >
        <view class="submit-item">
          <image class="submit-icon" src="@/static/images/deleteIcon.png" />
        </view>
        <view style="margin-top: 28rpx">
          <text class="submit-text">确定删除该列表吗</text>
        </view>
        <br />
        <view style="display: flex">
          <button
            @click="sureDelete"
            style="
              border-radius: 20rpx;
              background-color: red;
              color: rgba(255, 255, 255, 1);
              width: 230rpx;
              margin-top: 50rpx;
            "
          >
            确定
          </button>
          <button
            @click="cancelDelete"
            style="
              border-radius: 20rpx;
              background-color: gray;
              color: rgba(255, 255, 255, 1);
              width: 230rpx;
              margin-top: 50rpx;
            "
          >
            取消
          </button>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="submitFlag" background-color="#fff" :mask-click="false">
      <view
        style="
          text-align: center;
          background-color: #ffffff;
          padding: 11rpx;
          width: 580rpx;
          height: 470rpx;
          border-radius: 42rpx;
        "
      >
        <view>
          <view class="submit-item">
            <image class="submit-icon" src="@/static/duihaoblue.png" />
          </view>
          <view style="margin-top: 28rpx">
            <text class="submit-text">合同信息已经提交</text>
          </view>
          <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx">
            <text>已提醒审核人员进行审核</text>
          </view>
          <button
            @click="sureFive"
            style="
              border-radius: 20rpx;
              background-color: rgba(69, 145, 254, 1);
              color: rgba(255, 255, 255, 1);
              width: 300rpx;
              margin-top: 27rpx;
            "
          >
            确定
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import moment from "moment";
import configService from "@/common/service/config.service.js";

export default {
  data() {
    return {
      index: 0,
      array: ["部门"],
      indexTwo: 0,
      arrayTwo: ["全部", "已完成", "未完成"],
      departTitle: "",
      departFrom: "",
      departObj: {
        departIds: "",
        departTitle: "",
        departTitleLast: "",
      },
      createTime: '',
      searchValue: "",
      approvalStatus: "1",
      dataList: [],
      isShowFun: false,
      isShowDetails: false,
      detailsBar: 0, // 初始位置
      refreshing: true,
      pageSize: 10,
      pageNo: 1,
      total: 0,
      listUrl: "",
      isBatchChoose: false,
      selectList: [],
      isCheckAll: false,
      deleteIds: [],
    };
  },
  onLoad() {
    uni.$on("departCallBack", (data) => {
      this.$set(this.departObj, "departIds", data?.idArray?.join(","));
      this.$set(this.departObj, "departTitle", data?.titleArray?.join(">"));
      const title = data?.titleArray?.join(">")?.split(">");
      this.$set(this.departObj, "departTitleLast", title[title.length - 1]);
    });
  },
  watch: {
    createTime: {
      handler(val, old) {
        this.getList(1);
      },
    },
    approvalStatus: {
      handler(val, old) {
        this.getList(1);
      },
    },
  },
  mounted() {},
  computed: {
    createTimeShow: function () {
      return moment(this.createTime).isValid()
        ? moment(this.createTime).format("MM-DD")
        : "请选择";
    },
  },
  created() {
    this.getList(1);
  },
  methods: {
    getFileAccessHttpUrl(avatar, subStr) {
      if (!subStr) subStr = "http";
      if (avatar && avatar.startsWith(subStr)) {
        return avatar;
      } else {
        return configService.staticDomainURL + "/" + avatar;
      }
    },
    download() {},
    ChooseDepartIds(from = "") {
      this.departFrom = from;
      uni.navigateTo({
        url: "/pages/oa/common/depart",
      });
    },
    searchBtn() {
      this.getList(1);
    },
    clearSearch() {
      this.searchValue = "";
    },
    getList(pageNo) {
      let company = uni.getStorageSync("Auth_Company_Id");
      let params = {
        company,
        arbitrarily: this.searchValue,
        approvalStatus: this.approvalStatus,
        createTime: this.createTime ? this.createTime + " 00:00:00" : "",
        pageNo,
        pageSize: this.pageSize,
      };
      this.$http
        .get("/crm_contract/crmContract/list", {
          params: params,
        })
        .then((res) => {
          if (res.data.success) {
            let { records, current, size, total } = res.data.result || {};
            const data = records?.map((item) => ({
              ...item,
              type:
                item.signType === "1"
                  ? "第一次签订劳务合同"
                  : "合同续签劳工合同",
              avatar: this.getFileAccessHttpUrl(item.avatar),
            }));
            if (current === 1) {
              this.dataList = data;
            } else {
              this.dataList = this.dataList.concat(data);
            }
            this.pageNo = current;
            this.total = total;
            this.pageSize = size;
          }
        })
        .finally(() => {
          this.refreshing = false;
        });
    },
    onRefresh() {
      this.refreshing = true;
      this.getList(1);
    },
    onEndReached() {
      if (this.pageNo * this.pageSize < this.total) {
        this.getList(this.pageNo + 1);
      }
    },
    bindPickerChange(e) {
      this.index = e.detail.value;
    },
    bindPickerChangeTwo(e) {
      this.indexTwo = e.detail.value;
    },
    showFun() {
      this.isShowFun = true;
    },
    hideFun() {
      this.isShowFun = false;
    },
    gotoAdd() {
      console.log("新增");
      // uni.navigateTo({
      // 	url: '/pages/contractList/contractListAdd/index'
      // })
    },
    deleteBtn() {
      console.log("删除");
    },
    importBtn() {
      this.$refs.importFlag.open("center");
    },
    importCancel() {
      this.$refs.importFlag.close();
    },
    exportBtn() {
      this.$refs.exportFlag.open("center");
    },
    sureThree() {
      this.$refs.exportFlag.close();
    },
    toEdit(item) {
      uni.navigateTo({
        url:
          "/pages/contractList/contractListDrafts/edit/index?id=" +
          item.id +
          "&userId=" +
          item.userId,
      });
    },
    urging(id) {
      const params = {
        applicationId: id,
        approvalType: 1,
      };
      this.$http
        .get("/crm_on_hand/crmOnHand/urge", { params: params })
        .then((res) => {
          if (res.data.success) {
            this.$refs.urgingPopup.open("center");
          }
        });
    },
    sureOne() {
      this.$refs.urgingPopup.close();
    },

    importSureBtn() {
      this.$refs.importFlag.close();
      this.$refs.importSureFlag.open("center");
    },
    importSure() {
      this.importSureFlag = true;
    },
    importDetail() {
      this.$refs.importSureFlag.close();
      uni.navigateTo({});
    },
    sureTwo() {
      this.$refs.importSureFlag.close();
    },
    toDelete(id) {
      console.log("删除");
      this.deleteIds = [id];
      this.$refs.deletePopup.open("center");
    },
    sureDelete() {
      this.$refs.deletePopup.close();
      this.$http
        .delete("/crm_contract/crmContract/deleteBatch?ids=" + this.deleteIds)
        .then((res) => {
          if (res.data.success) {
            this.$tip.toast("删除成功");
            this.getList();
          } else {
            this.$tip.toast("删除失败");
          }
        })
        .catch(() => {
          this.$tip.loaded();
          this.$tip.toast("删除失败");
        });
    },
    cancelDelete() {
      this.$refs.deletePopup.close();
    },
    batchDelete() {
      this.isBatchChoose = !this.isBatchChoose;
    },
    checkBoxClick(e) {
      if (!this.selectList.includes(e.id)) {
        this.selectList.push(e.id);
      } else {
        const index = this.selectList.indexOf(e.id);
        if (index !== -1) {
          this.selectList.splice(index, 1);
        }
      }
    },
    checkAllClick() {
      this.isCheckAll = !this.isCheckAll;
      if (this.isCheckAll) {
        this.dataList.forEach((item) => {
          if (!this.selectList.includes(item.id)) {
            this.selectList.push(item.id);
          }
        });
      } else {
        this.selectList = [];
      }
    },
    draftBatchBtn() {
      // uni.navigateTo({
      // 	url: '/pages/contract/contractDrafts/index'
      // })
    },
    clearDatetimePicker() {
      this.createTime = "";
    },
    toExamine(id) {
      this.$http
        .post("/crm_contract/crmContract/submitTrial/" + id)
        .then((res) => {
          if (res.data.success) {
            this.$refs.submitFlag.open("center");
          }
        });
    },
    sureFive() {
      this.$refs.submitFlag.close();
      uni.navigateTo({
        url: "/pages/contractList/index",
      });
    },
    cancel() {
      this.isCheckAll = false;
      this.selectList = [];
      this.isBatchChoose = !this.isBatchChoose;
    },
    btnBatchSure() {
      this.deleteIds = this.selectList;
      this.isCheckAll = false;
      // this.selectList = []
      this.isBatchChoose = !this.isBatchChoose;
      this.$refs.deletePopup.open("center");
    },
  },
};
</script>

<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}

.blackList {
  height: 100%;
  overflow: hidden;
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 680rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.filter-btn {
  width: 40rpx;
  height: 40rpx;
  margin-right: 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-content-main {
  height: calc(100% - 12rpx - 86rpx);
  border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx;
  padding: 26rpx 34rpx 0 34rpx;
}

.select-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.select {
  width: 160rpx;
  height: 74rpx;
  border-radius: 60rpx;
  background-color: #4591fe;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 48rpx;
  position: relative;

  .select-value {
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    margin-right: 18rpx;
  }

  .select-icon {
    width: 22rpx;
    height: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20rpx;
    top: 25rpx;
  }
}

.list {
  height: calc(100% - 74rpx - 20rpx);
}

.list-item {
  border-radius: 28rpx;
  background-color: #ffffff;
  padding: 26rpx 24rpx 28rpx 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 26rpx;
  position: relative;

  .list-item-leftCenter {
    display: flex;
    flex-direction: row;
  }

  .list-item-left {
    width: 86rpx;
    height: 86rpx;
    margin-right: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-center {
    .list-item-row {
      display: flex;
      flex-direction: row;
      margin-bottom: 20rpx;

      .list-item-name {
        color: #101317;
        font-size: 32rpx;
        margin-right: 16rpx;
      }

      .list-item-sex {
        width: 106rpx;
        height: 42rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 20rpx;
        background-color: rgba(234, 171, 78, 0.35);
        line-height: 42rpx;
        text-align: center;
        color: rgba(255, 173, 4, 1);
        font-size: 24rpx;
      }

      .list-item-row-icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .list-item-row-title,
      .list-item-row-value {
        font-size: 24rpx;
        font-weight: 400;
        color: #101317;
        line-height: 38rpx;
      }
    }
  }

  .list-item-btn {
    width: 36rpx;
    height: 36rpx;
    margin-top: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-tab {
    width: 132rpx;
    height: 56rpx;
    text-align: center;
    line-height: 56rpx;
    background-color: rgba(69, 145, 254, 0.4);
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 26rpx;
    border-bottom-left-radius: 20rpx;
  }

  .list-item-tab-text {
    font-size: 26rpx;
    color: rgba(69, 145, 254, 1);
  }
}

.nav-right-image {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15px;
}

.fun-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 3, 3, 0.28);
  z-index: 10000;
}

.fun-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 556rpx;
  height: 444rpx;
  border-top-left-radius: 42rpx;
  border-bottom-left-radius: 42rpx;
  border-bottom-right-radius: 42rpx;
  position: absolute;
  right: 74rpx;
  background-color: #ffffff;
  padding-top: 35rpx;
}

.fun-item {
  width: 185rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 44rpx;
}

.fun-icon {
  width: 92rpx;
  height: 92rpx;
  margin-bottom: 22rpx;
}

.cu-form-group {
  background-color: transparent;
}

::v-deep {
  .cu-form-group uni-picker .picker {
    color: #ffffff;
  }

  .cu-form-group uni-picker::after {
    opacity: 0;
  }
}

.textView {
  margin-left: 15px;
  font-size: 10px;
  margin-top: 5px;
}

.listText {
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #101317;
}

.details-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  border-top-left-radius: 42rpx;
  border-bottom-left-radius: 42rpx;
  border-bottom-right-radius: 42rpx;
  position: absolute;
  right: 65px;
  background-color: #ffffff;
  padding: 5px 15px;
}

.listTextTwo {
  font-size: 10px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #101317;
  margin-left: 5px;
}

.submit-icon {
  width: 118rpx;
  height: 118rpx;
  margin-top: 58rpx;
}

.selectDepart {
  height: 74rpx;
  border-radius: 60rpx;
  background-color: #4591fe;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 48rpx;
  position: relative;

  .select-icon {
    width: 22rpx;
    height: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20rpx;
    top: 25rpx;
  }
}

.mySelect {
  position: relative;
  background-color: #4591fe;
  border-radius: 60rpx;
  height: 74rpx;

  .mySelect-value {
    position: inherit;
    margin-left: 10rpx;
    margin-right: -25rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
  }

  .mySelect-icon {
    width: 22rpx;
    height: 22rpx;
    position: absolute;
    top: 30%;
    right: 18%;
  }
}
</style>
